<template>
  <common-dialog dialog-title="模型属性选择" :visible.sync="visible"
                 :before-close="handleBeforeClose" v-draggable
                  width="50%" custom-class="select-model-attr-dialog"
                 :append-to-body="true">
    <template #body>
      <div class="model-attr-table-data-container" >
        <common-border-table ref="tableData"
                             :tableData="tableData"
                             v-loading="loading"
                             :table-title="tableTitle"
                             :filter-info="filterInfo"
                             filterable
                             append-to-body
                             :showRowOption="false"
                             type="selection"
                             @search-data="filterData"
                             @clear-data="resetData"
                             @selection-change="selectionChange"
                             @row-click="rowClick">
          <template #icon="scope">
            <i :class="scope.row.icon" v-if="scope.row.iconType === 'element-ui' && scope.row.icon"></i>
          </template>
        </common-border-table>
      </div>
    </template>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="selectAttrs" :disabled="disabled">确定</el-button>
      </div>
    </template>
  </common-dialog>
</template>

<script>

import CommonDialog from '@/components/common/CommonDialog'
import FormMixins from '@/components/mixins/form/FormMixins'
import CommonBorderTable from '@/components/common/CommonBorderTable'
import TableDataMixins from '@/components/mixins/table/TableDataMixins'
import {tableTitle, filterInfo} from '@/js/model/selectAttrsTableConfig'
import TableSelectionsMixins from '@/components/mixins/table/TableSelectionsMixins'
import {getModelAttrs} from '@/js/api/model/modelAttr'

export default {
  name: 'SelectModelAttr',
  components: {
    CommonDialog,
    // eslint-disable-next-line vue/no-unused-components
    CommonBorderTable
  },
  props: {
    modelId: {
      type: String
    },
    /**
     * 已选择的属性id
     */
    selected: {
      type: Array,
      default: () => []
    }
  },
  mixins: [FormMixins, TableDataMixins, TableSelectionsMixins],
  data(){
    return {
      disabled: false
    }
  },
  methods: {
    async getModelAttrs(){
      this.loading = true
      const tableData = await getModelAttrs(this.modelId, 'all')
      if (tableData.errorMsg){
        this.$msgAlert(tableData.errorMsg, 'error')
      } else {
        let data = tableData.data
        data = data.filter(value => this.selected.find(item => item === value.code) === undefined)
        this.sourceTableData = data
        this.tableData = [...this.sourceTableData]
      }
      this.loading = false
    },
    selectAttrs(){
      if (this.selections.length < 1){
        this.$tips('请选择要添加的数据！', 'error')
        return
      }
      this.$emit('getSelections', this.selections)
      this.closeDialog()
    }
  },
  created(){
    this.initData(filterInfo, tableTitle)
    this.getModelAttrs()
  }
}
</script>

<style lang="less">
  .select-model-attr-dialog {
    .calcHeight(40px);
    overflow-y: hidden !important;

    .el-dialog__body {
      .calcHeight(114px);
      padding-bottom: 0;
      padding-top: 0;

      .model-attr-table-data-container{
        height: 100%;
      }
    }
  }
</style>
